import React from 'react';
import { connect } from 'react-redux';
import { Button, message, Tooltip } from 'antd';
import List from './relationList';
import CommonListsIndex from '../../../components/CommonLists/index';
import PolicyModal from '../../Case/Check/Detail/policyModal';
import Modal from '../../../components/Modal/index';
import { getFeildByTreeData } from 'src/utils/utils';
import services from '../../../services/api';

function mapStateToProps(state) {
  return {
    strategy_mode: state.code.strategy_mode || [],
    orgList: state.global.orgList,
  };
}
@connect(mapStateToProps)
class RelationStrategy extends CommonListsIndex {
  constructor(props) {
    super(props);
    this.api = 'policy';
    this.listsComponent = List;
    this.queryTableParams = {
      ...props.param,
    };
    this.state = {
      ...this.state,
      applications: [],
    };
  }
  componentDidMount() {
    this.freshQueryList();
  }

  // 列表
  queryList(params) {
    services[this.api].relationList(params).then((res) => {
      if (res.code === '0') {
        const { records, total } = res.data;
        const currentPage = params.current;
        const page = Math.ceil(total / this.queryPanigation.size);
        if (records && total && records.length === 0 && currentPage > page) {
          this.onChangePagination(page, 'current');
        } else {
          this.setState({
            ...res.data,
          });
        }
      } else {
        message.error(res.msg);
      }
      this.setState({
        loading: false,
      });
    });
  }

  // 关闭复制字段弹窗
  closeModal = () => {
    Modal.close();
    this.freshQueryList();
  };

  showDetail = (record, title, width) => {
    const i = Modal.open({
      title: '策略详情',
      width: '1200px',
      content: (
        <PolicyModal
          {...this.props}
          record={record}
          actionType={'detail'}
          afterSubmit={this.afterSubmit}
          model={false}
        />
      ),
      isOkBtn: true,
      maskClosable: false,
      isCancelBtn: true,
      ok: () => Modal.close(i),
    });
  };

  getColumns = () => {
    const { orgList } = this.props;
    return [
      {
        title: '序号',
        key: 'id',
        dataIndex: 'id',
        width: 80,
        render: (_, __, index) => {
          return <>{index + 1}</>;
        },
      },
      {
        title: '所属机构',
        key: 'orgCode',
        dataIndex: 'orgCode',
        ellipsis: true,
        render: (text) => {
          const name = getFeildByTreeData({
            tree: orgList,
            souceVal: text,
          }).name;
          return (
            <Tooltip title={name} placement='topLeft'>
              <div className='overflowtext'>{name}</div>
            </Tooltip>
          );
        },
      },
      {
        title: '所属项目',
        key: 'projectName',
        dataIndex: 'projectName',
        ellipsis: true,
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div className='overflowtext'>{text}</div>
            </Tooltip>
          );
        },
      },
      {
        title: '策略名称',
        key: 'name',
        dataIndex: 'name',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div className='overflowtext'>
                <Button type='link' onClick={() => this.showDetail(record)}>
                  {text}
                </Button>
              </div>
            </Tooltip>
          );
        },
      },
      {
        title: '创建/修改人',
        dataIndex: 'createBy',
        key: 'createBy',
        ellipsis: true,
        render: (_, record) => {
          var content = !!record.updateBy
            ? `${record.createBy}/${record.updateBy}`
            : `${record.createBy}/${record.createBy}`;
          return (
            <Tooltip title={content} placement='topLeft'>
              {content}
            </Tooltip>
          );
        },
      },
      {
        title: '修改时间',
        dataIndex: 'updateAt',
        key: 'updateAt',
        ellipsis: true,
        render: (_, record) => {
          var content = !!record.updateAt ? record.updateAt : record.createAt;
          return (
            <Tooltip title={content} placement='topLeft'>
              <div className='overflowtext' style={{ width: '100%' }}>
                {content}
              </div>
            </Tooltip>
          );
        },
      },
    ];
  };

  render() {
    const ListsComponent = this.listsComponent;

    return (
      <div className='inner-content' style={{ marginTop: '-15px', marginBottom: '30px' }}>
        <ListsComponent
          {...this.state}
          rowKey='id'
          edit={this.edit}
          queryList={this.freshQueryList}
          columns={this.getColumns()}
          onChangePagination={this.onChangePagination}
        />
      </div>
    );
  }
}

export default RelationStrategy;
